<template>
    <div class="layout-root  my-modal smalll-form focus-ico">
        <a-row  style="width: 100%; margin-top: 5px;background-color: rgb(229 229 229 / 50%);">
            <a-col :span="24" style="width: 100%;">
                <a-form :model="form_modal" name="basic" :label-col="{ span: 1}" :wrapper-col="{ span: 23 }" autocomplete="off" class="min-form">
                    <a-form-item label="工程路径">
                        <a-col :span="20">
                            <a-input v-model:value="$store.state.task_dir" size="small" :disabled="true"/>
                        </a-col>
                        <a-col :span="1"></a-col>
                        <a-col :span="2">
                            <a-tooltip placement="right">
                                <template #title>可在程序config文件夹config.ini配置task_dir参数</template>
                                <question-circle-outlined class="ico-tips" />
                            </a-tooltip>
                        </a-col>
                        <a-col :span="1">
                        </a-col>
                    </a-form-item>
                    <a-form-item label="工程名称">
                        <a-col :span="20">
                            <a-input v-model:value="$store.state.task.task_name" size="small"/>
                        </a-col>
                        <a-col :span="1"></a-col>
                        <a-col :span="2" v-if="$store.state.open_create==2 && yx_data?.length>0">
                            <a-space>
                                <a-button type="primary"  size="small" @click="save_task">保存工程</a-button>
                            </a-space>
                        </a-col>
                        <a-col :span="1"></a-col>
                    </a-form-item>
                    <a-form-item label="选择影像" v-if="$store.state.open_create==2">
                        <a-col :span="20">
                            <a-input v-model:value="temp_yx_dir" size="small"/>
                        </a-col>
                        <a-col :span="1"></a-col>
                        <a-col :span="3">
                            <a-space>
                                <a-button type="primary"  size="small" @click="tif_search">影像搜索</a-button>
                                <a-button type="primary" size="small" @click="add_tif_dir">选择目录</a-button>
                            </a-space>
                        </a-col>
                    </a-form-item>
                </a-form>
            </a-col>
        </a-row>
        <!-- height: calc(100% - 120px); -->
        <a-row  style="width: 100%;  margin-top: 5px;background-color: rgb(229 229 229 / 50%);" justify="center">
            <a-table :data-source="yx_data" :columns="yx_table_columns"
                class="task-table" size="small" :showHeader="true" tableLayout="fixed"
                :pagination="yx_table_pagination"
                @change="yx_table_pagination_change"
                bordered rowKey="idx">
                <template #bodyCell="{ text, record, index, column }">
                    <template  v-if="column.dataIndex === 'operation'">
                        <a-space>
                            <a-button type="primary" size="small" @click="config_tif(record,index)" v-if="$store.state.open_create==1">配置</a-button>
                            <a-button type="primary" size="small" @click="delete_tif(record,index)" v-if="$store.state.open_create==2">删除</a-button>
                            <a-button type="primary" size="small" @click="edit_sensor()" v-if="$store.state.open_create==2 && index==0">载荷</a-button>
                        </a-space>
                    </template>
                </template>
            </a-table>
        </a-row>
    </div>
    <modal_select_server_dir />
    <sensor_cfg />
    <tif_cfg />
    
</template>
<script>
import { defineAsyncComponent } from 'vue'
export default {
  data() {
    return {
        task_select_name:"",
        task_selects:[],
        show_task_drawer_visible:false,
        temp_yx_dir:"",
        form_modal:{},
        yx_data: [],
        yx_table_columns: [
            {
                title: '影像',
                dataIndex: 'path',
                // align: 'center',
                width: '90%',
            },
            {
                title: '操作',
                dataIndex: 'operation',
                align: 'center',
                width: '10%',
            },
        ],
        yx_table_pagination: {
            current: 1,
            size: 'small',
            pageSize: 10,
            total: 0,
            showTotal: (total, range) => {
                return `共 ${total},${range[0]}/${range[1]}`
            },
        },

        mitt_open_close_task_id:"",
        mitt_modal_select_server_dir_back_id:"",
    }
  },
  components: {
    modal_select_server_dir: defineAsyncComponent(() => import('@/components/common/modal_select_server_dir.vue')),
    sensor_cfg: defineAsyncComponent(() => import('@/components/task/sensor_cfg.vue')),
    tif_cfg: defineAsyncComponent(() => import('@/components/task/tif_cfg.vue')),
    
  },
  beforeUnmount() {
    this.$mitt.off('open_close_task',this.mitt_open_close_task_id);
    this.$mitt.off('modal_select_server_dir_back',this.mitt_modal_select_server_dir_back_id);
  },
  mounted() {
    console.log("data.vue")
    //this.$store.state.open_create=1 //open 1 create2
    this.mitt_open_close_task_id=this.$mitt.on('open_close_task', (uid) => {
        if(this.$store.state.open_create==1){
            this.show_tif_table()
        }
        else{
            this.close_tif_table()
        }
        console.log("emit open_close_task")
    },this?.$?.uid);
    this.mitt_modal_select_server_dir_back_id=this.$mitt.on('modal_select_server_dir_back', (type_select_dir) => {
      if (type_select_dir.type == 'add_tif_dir') {
        this.temp_yx_dir=type_select_dir.val;
        this.tif_search();
      }
    },this?.$?.uid);
    if(this.$store.state.open_create==1 && this.$store.state.task?.tifs?.length>0){
        this.show_tif_table()
    }
  },
  methods: {
    async save_task(){
        if(!this.$store.state.task.task_name){
            this.$message.info("请输入工程名称")
            return
        }
        if(this.yx_data?.length==0){
            this.$message.info("请搜索影像后再保存")
            return
        }
        if(!this.$store.state.task?.sensors || this.$store.state.task?.sensors?.length==0){
            this.$message.info("请先配置工程载荷")
            return
        }
        let create_task_result=await this.$apis.task_check({
            task_dir :this.$store.state.task_dir,
            task_name:this.$store.state.task.task_name,
        })
        if(create_task_result?.result==false){
            this.$message.info(create_task_result?.message)
        }
        else{
            let _update_result =await this.$apis.task_update({
                task_name:this.$store.state.task.task_name,
                tifs:JSON.stringify(this.yx_data),
                sensors:JSON.stringify(this.$store.state.task.sensors), 
                data_dir:this.temp_yx_dir,
            })
            if(_update_result){
                this.start_working(_update_result)
            }
        }
    },
    yx_table_pagination_change(pagination) {
        this.yx_table_pagination.current = pagination.current
        if (pagination.pageSize != this.yx_table_pagination.pageSize) {
            this.yx_table_pagination.pageSize = pagination.pageSize
            this.yx_table_pagination.current = 1
        }
    },
    start_working(task){
        //进入编辑模式
        this.$store.state.open_create=1
        this.$store.state.task=task;
    },
    show_tif_table(){
        this.yx_data=this.$store.state.task?.tifs
    },
    close_tif_table(){
        this.yx_data=[]
    },
    add_tif_dir(){
        this.$mitt.emit('show_modal_select_server_dir', {
            type: 'add_tif_dir',
            showfile: false,
            avtive_dir: this.temp_yx_dir,
            showfile_filter: ['.img', '.tif', '.tiff'],
        },this?.$?.uid);
    },
    async tif_search(){
        if(!this.temp_yx_dir){
            this.$message.info("请输入影像目录")
            return
        }
        else{
            let tifs_api_result=await this.$apis.get_tifs({
                ph:this.temp_yx_dir
            })
            if(tifs_api_result?.message){
                this.$message.error(`${tifs_api_result?.message}`)
            }
            else{
                if(tifs_api_result?.result?.length>0){
                    this.yx_data=tifs_api_result?.result
                }
            }
        }
    },
    delete_tif(record,index){
        this.yx_data?.splice(index,1)
    },
    edit_sensor(){
        this.$mitt.iemit('sensor_cfg', {},this?.$?.uid);
    },
    config_tif(record,index){
        this.$mitt.iemit('tif_cfg', index,this?.$?.uid);
    },
  },
}
</script>